

<div style="position: relative; height: 800px;">
    <div style="float:left;width: 450px; padding: 10px; position: relative;">

        <div style="border:1px solid #DDDDDD; width: 400px; padding: 20px; border-radius: 10px; min-height: 120px;background-image: linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -o-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -moz-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -webkit-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -ms-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);

        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0.13, rgb(210,210,210)),
                color-stop(0.57, rgb(245,245,245))
        );position: relative;
        ">


            <h3>
                Ingresa el nombre del colegio
            </h3>
            <div class="ui-widget" style="padding-left:10px;">
                <input id="colegios_1" onclick="$('#colegios_1').val('')" size="50" />
            </div>
            <div id="el_colegio_1">
                <input type="hidden" name="colegio_id_1" id="colegio_id_1" value=""/>
            </div>
            <h3>
                Ingresa el tipo de gráfico que quieres desplegar
            </h3>
            <div style="padding-left:10px;">
                Distribución de notas -
                <input type="radio" id="tipo_grafico_1" name="tipo_grafico_1" value="1"/>
                <br>
                Ranking -
                <input type="radio" id="tipo_grafico_1" name="tipo_grafico_1" value="2"/>
                <br>
            </div><br>
            <div>
                <button onclick="generar_grafico_1();">
                    Generar
                </button>
            </div>
        </div>

        <div id="resultado_colegio_1">

        </div>
    </div>


    <div style="float:left;width: 450px; padding: 10px;position: relative;">

        <div style="border:1px solid #DDDDDD; width: 400px; padding: 20px; border-radius: 10px; min-height: 120px;background-image: linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -o-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -moz-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -webkit-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);
        background-image: -ms-linear-gradient(bottom, rgb(210,210,210) 13%, rgb(245,245,245) 57%);

        background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0.13, rgb(210,210,210)),
                color-stop(0.57, rgb(245,245,245))
        );position: relative;
        ">


            <h3>
                Ingresa el nombre del colegio
            </h3>
            <div class="ui-widget" style="padding-left:10px;">
                <input id="colegios_2" onclick="$('#colegios').val('')" size="50" />
            </div>
            <div id="el_colegio_2">
                <input type="hidden" name="colegio_id_2" id="colegio_id_2" value=""/>
            </div>
            <h3>
                Ingresa el tipo de gráfico que quieres desplegar
            </h3>
            <div style="padding-left:10px;">
                Distribución de notas -
                <input type="radio" id="tipo_grafico_2" name="tipo_grafico_2" value="1"/>
                <br>
                Ranking -
                <input type="radio" id="tipo_grafico_2" name="tipo_grafico_2" value="2"/>
                <br>
            </div><br>
            <div>
                <button onclick="generar_grafico_2();">
                    Generar
                </button>
            </div>
        </div>

        <div id="resultado_colegio_2">

        </div>
    </div>
</div>
<style type="text/css">
    .ui-autocomplete-loading { background: white url('../images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script type="text/javascript">
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }
        $( "#colegios_1" ).autocomplete({
            source: "./analisis/verColegios",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            minLength: 1,
            select: function( event, ui ) {
                $("#colegio_id_1").val(ui.item.id);
                //alert($("#colegio_id_1").val());
            }
        });
    });

    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }
        $( "#colegios_2" ).autocomplete({
            source: "./analisis/verColegios",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            minLength: 1,
            select: function( event, ui ) {
                $("#colegio_id_2").val(ui.item.id);
                //alert($("#colegio_id_1").val());
            }
        });
    });


    function generar_grafico_1(){
        if($('input[id=tipo_grafico_1]:checked').val()==1){
            callUrl('resultado_colegio_1','<?php echo url_for('analisis/distribucionColegio'); ?>'+'?colegio_id='+$("#colegio_id_1").val());
        }
        else if($('input[id=tipo_grafico_1]:checked').val()==2){
            callUrl('resultado_colegio_1','<?php echo url_for('analisis/rankingCruchColegio'); ?>'+'?colegio_id='+$("#colegio_id_1").val());
        }
    }

    function generar_grafico_2(){
        if($('input[id=tipo_grafico_2]:checked').val()==1){
            callUrl('resultado_colegio_2','<?php echo url_for('analisis/distribucionColegio'); ?>'+'?colegio_id='+$("#colegio_id_2").val());
        }
        else if($('input[id=tipo_grafico_2]:checked').val()==2){
            callUrl('resultado_colegio_2','<?php echo url_for('analisis/rankingCruchColegio'); ?>'+'?colegio_id='+$("#colegio_id_2").val());
        }
    }
</script>